<script setup>
    import { provide, onMounted } from 'vue'

    import LeftCard from '../../components/LeftCard.vue'
    import IrrigateMap from './components/IrrigateMap.vue'
    import IrrigateList from './components/IrrigateList.vue'
    import IframeBox from '@/components/IframeBox.vue'

    import { getIrrigationList } from '@/api/irrigate'

    // 显示详情
    let showDetail = $ref(false)
    
    const closeDetailDialog = (e = '') => {
        showDetail = false
    }
    
    provide('close', closeDetailDialog)

    onMounted(() => {
        getAreaList()
    })

    // 区域列表
    let areaList = $ref([])
    let areaListCopy = []

    // 定位列表
    let positionList = $ref([])

    // 数据加载中
    let areaLoading = $ref(true)

    // 选择的区域
    let currentArea= $ref(null)

    // 获取灌溉区域列表
    const getAreaList = () => {
        getIrrigationList().then(res => {
            areaLoading = false
            if(res.success){
                let { areaCount, yzPointList } = res.result
                areaList = areaCount
                areaListCopy = areaCount
                positionList = yzPointList
            }
        })
    }

    // 区域搜索
    const areaSearch = (keyword) => {
        let data = JSON.parse(JSON.stringify(areaListCopy))
        if(!keyword){
            areaList = data
            return
        }

        let result = []

        data.forEach((item) => {
            if(item.name.indexOf(keyword) > -1){
                result.push({
                    ...item,
                    show: true
                })
            }else {
                let arr = []
                item.returnTownsList.forEach((sub) => {
                    if(sub.name.indexOf(keyword) > -1){
                        arr.push(sub)
                    }
                })

                if(arr.length){
                    result.push({
                        name: item.name,
                        count: item.count,
                        show: true,
                        returnTownsList: arr
                    })
                }
            }
        })
        
        areaList = result
    }

    // 点击列表 村镇 在地图上显示该区域中心点
    let irrigateMap = $ref(null)
    const handleClickArea = (name) => {
        currentArea = name
        irrigateMap.setMapCenterPoint(name)
    }

    // 点击机井显示列表
    let pumpName = $ref('')
    const showList = (name) => {
        pumpName = name
        showDetail = true
    }


</script>

<template>
    <div class="irrigate-manage-wrap" v-loading="areaLoading">
        <irrigate-map 
            v-if="!areaLoading" 
            :positionList="positionList"
            ref="irrigateMap"
            @showList="showList"
        ></irrigate-map>

        <div class="suspended-content-warp">

            <left-card @areaSearch="areaSearch">

                <el-scrollbar class="left-list-scrollbar">
                    <div 
                        class="group"
                        v-for="(item, index) in areaList"
                        :key="index"
                        @click="item.show = !item.show"
                    >
                        <div class="group-name town-item">
                            <div class="name">{{ item.name }}({{ item.count }})</div>
                            <img src="../../assets/images/arrow-icon.png" :class="{ unfold: item.show }">
                        </div>
    
                        <ul class="list-wrap" :class="{ unfold: item.show }">
                            <li 
                                v-for="(sub, subIndex) in item.returnTownsList" 
                                :key="subIndex"
                                :class="{ active: currentArea == sub.name }"
                                @click.stop="handleClickArea(sub.name)"
                            >
                                {{ sub.name }}({{ sub.count }})
                            </li>
                        </ul>
    
                    </div>
                </el-scrollbar>

            </left-card>

            <irrigate-list v-if="showDetail" :pumpName="pumpName"></irrigate-list>

            <!-- iframe 灌溉管理 -->
            <iframe-box></iframe-box>

        </div>

    </div>
</template> 

<style lang="less" scoped>
    .irrigate-manage-wrap{
        width: 100%;
        height: 100%;
        position: relative;

        .left-list-scrollbar{
            height: 680px;
        }

        .group{
            padding: 10px 20px;

            .group-name{
                color: var(--color-green);
                display: flex;
                align-items: center;
                cursor: pointer;

                &.town-item{
                    font-size: 18px;

                    &:hover{
                        text-shadow: 0 0 2px #52CCFF;
                    }
                } 

                .name{
                    margin-right: 10px;
                }

                img{
                    width: 14px;
                    height: 14px;
                    transition: all .3s;
                    transform: rotate(270deg);

                    &.unfold{
                        transform: rotate(360deg);
                    }
                }
            }

            .list-wrap{
                height: 0;
                overflow: hidden;

                &.unfold{
                    height: auto;
                    padding-bottom: 10px;
                }

                li{
                    padding-top: 15px;
                    color: #fff;
                    cursor: pointer;

                    &:hover{
                        color: var(--color-green);
                    }

                    &.active{
                        color: var(--color-green);
                    }
                }
            }
        }
    }
</style>